<template>
  <footer class="footer">
    <ul>
      <li v-for="(item, index) in footerList" :key="index" :class="{active: num == index}" @click="toAnother(index)" >
        <p :class="item.icon"></p>
        <p> {{item.category}} </p>
      </li>
    </ul>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      footerList: [
        {
          icon: "iconfont icon-shouye",
          category: "首页",
          path: '/home'
        },
        {
          icon: "iconfont icon-shangcheng",
          category: "商城",
          path: '/shop'
        },
        {
          icon: "iconfont icon-13",
          category: "生活服务",
          path: '/service'
        },
        {
          icon: "iconfont icon-guanyuwomen",
          category: "我的",
          path: '/my'
        },
      ],

    };
  },
  methods: {
      toAnother(index) {
        if(this.num != index) {
          this.num = index
          this.$store.commit('setNum', index)
          this.$router.push(this.footerList[index].path)
        }
      }
  },
  mounted() {
    this.num = this.$store.state.num;
  }
};
</script>

<style scoped lang="less">
.footer {
  height: 98px;
  width: 750px;
  display: flex;
  background: #fff;
  align-items: center;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #ff5654;
  ul {
    width: 750px;
    height: 65px;
    display: flex;
    li {
      flex: 1;
      display: flex;
      text-align: center;
      flex-direction: column;
      font-size: 38px;
      color: #595959;
      p {
        font-size: 20px;
        padding: 0;
        margin: 0;
        &:nth-child(1) {
            font-size: 38px;
        }
      }
    }
    .active {
        color: #ff5654;
    }
  }
}
</style>
